<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../../js/hpFrame.js"></script>
    <script src="../../js/hpComponent.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <div class="pageContainer">
            <div class="formContainer">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="课程名称" :label-width="formLabelWidth" prop="name" required>
                                <el-input v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="课程简介" :label-width="formLabelWidth" prop="remark" required>
                                <el-input v-model="form.remark" autocomplete="off" :rows="8" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="课件资料" :label-width="formLabelWidth">
                                <common-upload :groupguid="form.id"></common-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="divEditButtons">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="close">关 闭</el-button>
        </div>
    </div>

</body>
<script>
    var addUrl = apiFrameUrl + "course/save";
    var pageData = {
        //表单数据
        form: {
            id: getNewGuid(),
            name: '',
            remark: '',
            createBy: localStorage.getItem("local_userId"),
            createByName: localStorage.getItem("local_userName"),
            createTime:''
        },
        //样式
        formLabelWidth: '120px',
        //验证规则
        rules: {
            name: [{
                required: true,
                message: '请输入课程名称',
                trigger: 'blur'
            }],
            remark: [{
                required: true,
                message: '请输入课程简介',
                trigger: 'blur'
            }],

        },
    }
    var app = new Vue({
        el: '#app',
        data: pageData,
        methods: {
            //确定
            save() {
                var page = this;
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        pageData.form.createTime = getDatetime()
                        JsonAjax(JSON.stringify(pageData.form), addUrl, function (data,
                            status) {
                            if (data.success) {
                                OpenSuccess('提示', '添加成功', function () {
                                    CloseDialog(null, 'courseadd');
                                })
                            } else {
                                OpenFail('提示', '添加失败')
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            //取消
            close() {
                CloseDialog(null, 'courseadd');
            },
        },
        mounted() {
            checkUserInfo();
        },
    })
</script>

</html>